<template>
  <div class="components-recruit">
    <div class="title">
      {{ $t("recruit.recruitPop") }}
    </div>
    <el-form
      ref="dataFormRef"
      :label-width="$t('language') === 'language' ? '160px' : '80px'"
      class="set-form"
      label-position="left"
      :rules="dataRule"
      :model="dataForm"
      @submit.prevent
    >
      <el-form-item
        :label="$t('recruit.popularizeSwitch')"
        prop="state"
      >
        <el-radio-group v-model="dataForm.state">
          <el-radio :label="0">
            {{ $t("seckill.close") }}
          </el-radio>
          <el-radio :label="1">
            {{ $t("seckill.open") }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('recruit.coverImage')">
        <ImgUpload v-model="dataForm.pic" />
      </el-form-item>

      <el-form-item
        :label="$t('recruit.popularizeTitle')"
        prop="title"
      >
        <el-input
          v-model="dataForm.title"
          maxlength="60"
          show-word-limit
        />
      </el-form-item>

      <el-form-item
        :label="$t('recruit.popularizeContent')"
        prop="content"
      >
        <TinyMce
          :key="tinymceFlag"
          ref="tinyMceRef"
          v-model="dataForm.content"
        />
      </el-form-item>
    </el-form>
    <div
      class="default-btn"
      @click="onSubmit()"
    >
      {{ $t('distribution.save') }}
    </div>
  </div>
</template>

<script setup>
import { validHtmlLength } from '@/utils/index.js'
import ImgUpload from '@/components/img-upload/index.vue'
import TinyMce from '@/components/tiny-mce/index.vue'
import { ElMessage } from 'element-plus'
import { toRaw } from 'vue'

const dataForm = ref({
  pic: '',
  title: '',
  content: ''
})
const dataFormRef = ref(null)
const dataRule = {
  title: [
    { required: true, message: $t('recruit.tipTitleTip1'), trigger: 'brue' },
    { max: 255, message: $t('recruit.limitLangTip2'), trigger: 'brue' }
  ],
  content: [
    { required: true, message: $t('product.content'), trigger: 'brue' }
  ]
}
// 设置数据
const tinyMceRef = ref(null)
const onSetDate = (data) => {
  dataForm.value = data
}
// 获取数据
const onGetData = () => {
  http({
    url: http.adornUrl('/admin/distributionConfig/recruit_info'),
    method: 'get'
  }).then(({ data }) => {
    if (data) {
      onSetDate(data)
    }
  })
}
onMounted(() => {
  onGetData()
})

// 提交表单
const onSubmit = () => {
  dataFormRef.value.validate((valid) => {
    if (valid) {
      if (validHtmlLength(dataForm.value.content)) {
        return
      }
      if (dataForm.value.content && dataForm.value.content.length > 20000) {
        return ElMessage({
          message: $t('product.tinyMceTip'),
          type: 'error',
          duration: 1500
        })
      }
      const param = toRaw(dataForm.value)
      http({
        url: http.adornUrl('/admin/distributionConfig/recruit'),
        method: 'post',
        data: http.adornData(param)
      }).then(() => {
        ElMessage({
          message: $t('publics.operation'),
          type: 'success',
          duration: 1500
        })
      }).catch(() => {

      })
    }
  })
}

const tinymceFlag = ref(new Date() + 1)
// keep-alive缓存的缘故 需调用钩子函数 设置key值不然编辑器无法使用
onActivated(() => {
  tinymceFlag.value = new Date() + 1
})

</script>
<style lang="scss" scoped>
.components-recruit{
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background: #f2f2f6;
  padding: 20px 35px;
  height: 100%;
  border-bottom: 1px solid #dddce2;
  .title {
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    padding-right: 20px;
  }
  .set-form {
    margin: 20px;
  }
}

</style>
